@import "../common/functions.scss";
@import "../common/_variables.scss";
$fs: pxToRem(30px) pxToRem(60px) pxToRem(40px) pxToRem(48px) pxToRem(24px) pxToRem(22px) pxToRem(36px);
%fb{font-weight: bold;}
body{
	background: url(../../img/prize_bg.jpg) no-repeat #29C8DB;
	background-size: 100%;
	font-family: $sans-serif;
	padding: 0 pxToRem(20px) pxToRem(150px);
}
.prize_head{
	text-align: center;
	margin-bottom: pxToRem(24px);
	.vip{
		margin: pxToRem(40px) 0;
		font-size: nth($fs,1);
		line-height: 1;
		em{
			color: #E0470B;
		}
	}
	h2{
		font-size: nth($fs,2);
		white-space: nowrap;
		margin-bottom: pxToRem(26px);
		color: #3c1c29;
		line-height: 1;
	} 
	h3{
		font-size: nth($fs,3);
		white-space: nowrap;
		font-weight: normal;
		margin-bottom: pxToRem(40px);
		line-height: 1;
	}
	.rule{
		color: #005368;
		font-size: nth($fs,1);
		text-align: right;
		padding-right: pxToRem(26px);
		.icon_rule{
			display: inline-block;
			width: pxToRem(33px);
			height: pxToRem(33px);
			line-height: pxToRem(33px);
			color: #59D4E6;
			background: #008291;
			border-radius: 50%;
			text-align: center;
			font-family: simsun;
			margin-right: pxToRem(9px);
		}
	}
}
.prize_main{
	.quan_container{
		background: #FEA144;
		border-radius: .15rem;
		padding-left: pxToRem(10px);
		margin-bottom: pxToRem(20px);
		box-shadow: 3px 3px 0 #16B9CD;
	}
}
.quan{
	background: $_fff;
	padding-left: pxToRem(20px);
	border-top-right-radius: .15rem;
	border-bottom-right-radius: .15rem;
	.quan_img{
		width: pxToRem(100px);
		margin: pxToRem(35px) pxToRem(26px) pxToRem(35px) 0;
		height: pxToRem(100px);
		img{
			width: 100%;
		}
	}
}
.quan_txt{
	width: pxToRem(360px);
	padding: pxToRem(35px) 0 pxToRem(30px) 0;
	.title{
		font-size: nth($fs,5);
		@extend %fb;
	}
	.quan_info{
		font-size: nth($fs,6);
		color: #9b9b9b;
	}
	.quanma{
		font-size: nth($fs,5);
		color: #959595;
		em{
			color: #FF6931;
		}
	}
	p + p{
		margin-top: pxToRem(20px);
	}
	p{
		line-height: 1;
	}
}
.quan_price{
	font-size: nth($fs,5);
	width: pxToRem(200px);
	padding: pxToRem(45px) 0;
	text-align: center;
	background-image: radial-gradient(#f0f0f0 30%,transparent 0);
	background-size: pxToRem(13px) pxToRem(13px);
	background-position: pxToRem(-3px) 0;
	background-repeat: repeat-y;
	p{
		color: #ff4f00;
	}
	em{
		font-size: nth($fs,4);
		@extend %fb;
	}
	p:last-child{
		color: #9c9c9c;
		margin-top: pxToRem(15px);
	}
}
.receive{
	background: #0ca4f8 !important;
	.quan_txt{
		font-size: nth($fs,7);
		line-height: 2;
	}
	.quan_num{
		font-size: nth($fs,5);
		color: #f74e00;
		em{
			font-size: nth($fs,4);
		}
	}
	.quan_price{
		font-size: nth($fs,3);
		color: $_fff;
		background-color: #fe7300;
		background-image: radial-gradient(#f0f0f0 30%,transparent 0);
		border-top-right-radius: .15rem;
		border-bottom-right-radius: .15rem;
		background-position: pxToRem(-6px) 0;
	}
}
.dot{
	position: relative;
	&:after{
		position: absolute;
		content: "";
		@include tick(pxToRem(24px),pxToRem(24px),pxToRem(5px),$_fff,135deg,0,50%);
		right: pxToRem(17px);
		top: 50%;
	}
}
.btn_more{
	text-align: center;
	margin-top: .48rem;
	font-size: 0;
	h2{
		font-size: nth($fs,1);
		color: #04666F;
		margin-bottom: pxToRem(36px);
	}
	.btn{
		display: inline-block;
		width: 100%;
		padding: pxToRem(23px) 0;
		color: $_fff;
		background-color: #FF7200;
		font-size: pxToRem(40px);
		border-radius: .1rem;
		box-shadow: 3px 3px 0 #16B9CD;
	}
}